<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>chinamap</title>
    <script src="../../build/datav.js"></script>
    <script src="../../lib/charts/chinamap.js"></script>
<style type="text/css">
#map {
    background-color: #fdd;
    width: 980px;
    font: 14px '微软雅黑';
    padding: 16px;
}
#chart {
    border-top: 1px dashed #F00;
    border-bottom: 1px dashed #F00;
    border: 1px solid #F00;
}
.mapTable {
    background-color: #dfd;
    float: right;
    width: 290px;
}
.mapTable table {
    width: 290px;
    table-layout: fixed;
    cursor: default;
}
.mapTableType div {
  border: 1px solid black;
  border-bottom: 0px;
  width: 144px;
  height: 28px;
  line-height: 28px;
  padding: 0;
  text-align: center;
  float: left;
}
.mapTableType div.activeTab {
  cursor: default;
  background-color: white;
}
.mapTableType div.inactiveTab {
  cursor: pointer;
  background-color: #ddd;
}
.mapTableType div:first-child {
  border-right: 0px;
  width: 143px;
}
#mapTableArea {
  width: 28px;
}
#mapTableSearch {
  width: 130px;
}
#mapTableTrade {
  width: 130px;
}
#mapTableHead {
  height: 28px;
}
#mapTableHead td {
  text-align: center;
}
#mapTableProvinceRow td{
  overflow: hidden;
  white-space: nowrap;
}
#mapTableCityRow td{
  overflow: hidden;
  white-space: nowrap;
}
#mapTableProvinceRow td:first-child {
  overflow: auto;
  white-space: normal;
  vertical-align: middle;
}
#mapTableCityRow td:first-child {
  overflow: auto;
  white-space: normal;
  vertical-align: middle;
}
.mapTable td {
  border: 1px solid black;
  padding: 6px;
}
.mapTable ul {
  padding: 0;
  margin: 0;
}
.mapTable li {
  list-style-type: none;
  list-style-position: inside;
  white-space: nowrap;
}
/*
.mapTable .mapTableHead {
  height: 20px;
}
.mapTable .mapTableProvinceRow {
  height: 60px;
}
.mapTable .mapTableCityRow {
  height: 110px;
}
*/
.mapTable table {
  border-collapse: collapse;
}
</style>
  </head>

  <body>
    <div id="map">
    <!--
    <div class="mapTable">
        <div class="mapTableHead mapTableRow">
            <div>偏好度(tgi)排行榜</div>
            <div>人群占比排行榜</div>
        </div>
        <div class="mapTableIndexType mapTableRow">
            <div class="mapTableC1">&nbsp;</div>
            <div class="mapTableCSearch">搜索指数</div>
            <div class="mapTableCTrade">成交指数</div>
        </div>
        <div class="mapTableProvince mapTableRow">
            <div class="mapTableC1">省份</div>
            <div class="mapTableCSearch"></div>
            <div class="mapTableCTrade"></div>
        </div>
        <div class="mapTableCity mapTableRow">
            <div class="mapTableC1">城市</div>
            <div class="mapTableCSearch"></div>
            <div class="mapTableCTrade"></div>
        </div>
    </div>
    --> 
    <div class="mapTable">
      <div class="mapTableType">
        <div id="mapTableTgiTab">偏好度(tgi)排行榜</div>
        <div id="mapTablePopuTab">人群占比排行榜</div>
      </div>

      <table>
        <colgroup>
          <col id="mapTableArea" />
          <col id="mapTableSearch" />
          <col id="mapTableTrade" />
        </colgroup>
        <tbody>
          <tr id = "mapTableHead">
            <td scope="col">&nbsp;</td>
            <td scope="col">搜索指数</td>
            <td scope="col">成交指数</td>
          </tr>
          <tr id = "mapTableProvinceRow">
            <td>省份</td>
            <td></td>
            <td></td>
          </tr>
          <tr id = "mapTableCityRow">
            <td>城市</td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div id="chart"></div>
    </div>
    <script>
        var searchIndexColor = "steelblue";
        var tradeIndexColor = "#78E700";

        var stage = "tgi"; //"tgi", "popu"

        //important dom obj
        var highlightedCityPoint; //raphael obj
        var searchCityTd = $("#mapTableCityRow").find("td:nth-child(2)");
        var tradeCityTd = $("#mapTableCityRow").find("td:nth-child(3)");
        var searchProvTd = $("#mapTableProvinceRow").find("td:nth-child(2)");
        var tradeProvTd = $("#mapTableProvinceRow").find("td:nth-child(3)");
        var tgiPoints; //raphael set
        var popuPoints; //raphael set

        var data = {
          tgi: {
              'searchTopProvinces': ['江西', '山东', '湖北', '安徽', '河南'],
              'tradeTopProvinces': ['青海', '宁夏', '甘肃', '江西', '湖北'],
              'searchTopCities': [
                  {'name': '上海', 'search': 1, 'trade': 5},
                  {'name': '北京', 'search': 2, 'trade': 6},
                  {'name': '杭州', 'search': 3, 'trade': 25},
                  {'name': '苏州', 'search': 4, 'trade': 7},
                  {'name': '宁波', 'search': 5, 'trade': 45},
                  //{'name': '克拉玛依超超长字符', 'search': 6, 'trade': 55},
                  {'name': '克拉玛依', 'search': 6, 'trade': 55},
                  {'name': '九江', 'search': 7, 'trade': 65},
                  {'name': '厦门', 'search': 8, 'trade': 8},
                  {'name': '常州', 'search': 9, 'trade': 9},
                  {'name': '哈尔滨', 'search': 10, 'trade': 215}
              ],
              'tradeTopCities': [
                  {'name': '无锡', 'search': 11, 'trade': 1},
                  {'name': '大连', 'search': 21, 'trade': 2},
                  {'name': '澳门', 'search': 31, 'trade': 3},
                  {'name': '南宁', 'search': 41, 'trade': 4},
                  {'name': '上海', 'search': 1, 'trade': 5},
                  {'name': '北京', 'search': 2, 'trade': 6},
                  {'name': '苏州', 'search': 4, 'trade': 7},
                  {'name': '厦门', 'search': 8, 'trade': 8},
                  {'name': '常州', 'search': 9, 'trade': 9},
                  {'name': '南京', 'search': 110, 'trade': 10}
              ],
              'areaInfo': {
                '北京': 19612368,
                '天津': 12938224,
                '河北': 71854202,
                '山西': 35712111,
                '内蒙古': 24706321,
                '辽宁': 43746323,
                '吉林': 27462297,
                '黑龙江': 38312224,
                '上海': 23019148,
                '江苏': 78659903,
                '浙江': 54426891,
                '安徽': 59500510,
                '福建': 36894216,
                '江西': 44567475,
                '山东': 95793065,
                '河南': 94023567,
                '湖北': 57237740,
                '湖南': 65683722,
                '广东': 104303132,
                '广西': 46026629,
                '海南': 8671518,
                '重庆': 28846170,
                '四川': 80418200,
                '贵州': 34746468,
                '云南': 45966239,
                '西藏': 3002166,
                '陕西': 37327378,
                '甘肃': 25575254,
                '青海': 5626722,
                '宁夏': 6301350,
                '新疆': 21813334,
                '香港': 7097600,
                '澳门': 552300,
                '台湾': 23162123
              }
          },
          popu: {
            'searchTopProvinces': ['江苏', '山西', '湖南', '安徽', '河南'],
            'tradeTopProvinces': ['新疆', '吉林', '甘肃', '江西', '湖北'],
            'searchTopCities': [
              {'name': '上海', 'search': 1, 'trade': 5},
              {'name': '北京', 'search': 2, 'trade': 6},
              {'name': '杭州', 'search': 3, 'trade': 25},
              {'name': '苏州', 'search': 4, 'trade': 7},
              {'name': '宁波', 'search': 5, 'trade': 45},
              {'name': '克拉玛依', 'search': 6, 'trade': 55},
              {'name': '九江', 'search': 7, 'trade': 65},
              {'name': '厦门', 'search': 8, 'trade': 8},
              {'name': '常州', 'search': 9, 'trade': 9},
              {'name': '哈尔滨', 'search': 10, 'trade': 215}
            ],
            'tradeTopCities': [
              {'name': '拉萨', 'search': 11, 'trade': 1},
              {'name': '大连', 'search': 21, 'trade': 2},
              {'name': '澳门', 'search': 31, 'trade': 3},
              {'name': '西安', 'search': 41, 'trade': 4},
              {'name': '上海', 'search': 1, 'trade': 5},
              {'name': '北京', 'search': 2, 'trade': 6},
              {'name': '苏州', 'search': 4, 'trade': 7},
              {'name': '厦门', 'search': 8, 'trade': 8},
              {'name': '常州', 'search': 9, 'trade': 9},
              {'name': '南京', 'search': 110, 'trade': 10}
            ],
            'areaInfo': {
                '北京': 19612368,
                '天津': 12938224,
                '河北': 71854202,
                '山西': 35712111,
                '内蒙古': 24706321,
                '辽宁': 43746323,
                '吉林': 27462297,
                '黑龙江': 38312224,
                '上海': 23019148,
                '江苏': 78659903,
                '浙江': 54426891,
                '安徽': 59500510,
                '福建': 36894216,
                '江西': 44567475,
                '山东': 95793065,
                '河南': 94023567,
                '湖北': 57237740,
                '湖南': 65683722,
                '广东': 104303132,
                '广西': 46026629,
                '海南': 8671518,
                '重庆': 28846170,
                '四川': 80418200,
                '贵州': 34746468,
                '云南': 45966239,
                '西藏': 3002166,
                '陕西': 37327378,
                '甘肃': 25575254,
                '青海': 5626722,
                '宁夏': 6301350,
                '新疆': 21813334,
                '香港': 7097600,
                '澳门': 552300,
                '台湾': 0
            }
          }
        };
        //make cache for city data
        (function () {
          var makeCityHash = function(stage, cityListName, cityHashName){
            var cityHash = data[stage][cityHashName] = {};
            data[stage][cityListName].forEach(function (d, i) {
              cityHash[d.name] = d;
            });
          };
          makeCityHash('tgi', 'searchTopCities', 'searchCityHash');
          makeCityHash('tgi', 'tradeTopCities', 'tradeCityHash');
          makeCityHash('popu', 'searchTopCities', 'searchCityHash');
          makeCityHash('popu', 'tradeTopCities', 'tradeCityHash');
        }());

        var highlightCityPoint = function (cityName) {
          var cityData = data[stage].searchCityHash[cityName] || data[stage].tradeCityHash[cityName];
          highlightedCityPoint = chinamap.createCityPoints([cityData], function (city) {
                        return this.paper.circle(city.coord[0], city.coord[1], 30)
                            .attr({
                                "stroke-width": 4,
                                "stroke": "steelblue",
                                "fill": "#fff"
                                })
                            .data("cityInfo", city)
                            .mouseout(function () {
                              //lowlightCity(city.name);
                              chinamap.fire("cityMouseout", city.name);
                            });
                    })[0];
          var cityInfo = highlightedCityPoint.data("cityInfo");
          chinamap.floatTag.html("<p>" + cityInfo.name + "</p>"
              + "<p>" + (stage === 'tgi' ? "搜索tgi排名： " : "搜索人群占比排名：") + cityInfo.search + "</p>"
              + "<p>" + (stage === 'tgi' ? "成交tgi排名： " : "成交人群占比排名：") + cityInfo.trade + "</p>")
              .css("visibility", "visible");
          chinamap.floatTag.creator.changeLoc(cityInfo.pointLoc);
        };

        var lowlightCityPoint = function () {
          if (typeof highlightedCityPoint !== 'undefined') {
            highlightedCityPoint.remove();
            highlightedCityPoint = undefined;
            chinamap.floatTag.css("visibility", "hidden");
          }
        };
        var fillTable = function () {
          var getProvince = function (stage, indexType) {
            var stageData = data[stage];
            var provinceData;
            var html = '';
            if (indexType === 'search') {
              provinceData = stageData['searchTopProvinces'];
            } else {
              provinceData = stageData['tradeTopProvinces'];
            }
            html += '<ul>';
            provinceData.forEach(function (d, i) {
              html += '<li><span>' + (i + 1) + ' ' + d + '</span></li>';
            });
            html += '</ul>';
            return html;
          };
          var getCity = function (stage, indexType) {
            var stageData = data[stage];
            var cityData;
            var html = '';
            if (indexType === 'search') {
              cityData = stageData['searchTopCities'];
            } else {
              cityData = stageData['tradeTopCities'];
            }
            html += '<ul>';
            cityData.forEach(function (d, i) {
              html += '<li><span>' + (i + 1) + ' ' + d.name + '</span></li>';
            });
            html += '</ul>';
            return html;
          };
          //set tab
          if (stage === 'tgi') {
            $("#mapTableTgiTab").removeClass("inactiveTab").addClass("activeTab");
            $("#mapTablePopuTab").removeClass("activeTab").addClass("inactiveTab");
          } else {
            $("#mapTableTgiTab").removeClass("activeTab").addClass("inactiveTab");
            $("#mapTablePopuTab").removeClass("inactiveTab").addClass("activeTab");
          }

          //fill table
          searchProvTd.html(getProvince(stage, 'search'));
          tradeProvTd.html(getProvince(stage, 'trade'));
          searchCityTd.html(getCity(stage, 'search'));
          tradeCityTd.html(getCity(stage, 'trade'));
          //test hide row 
          $("#mapTableProvinceRow").hide();
        };
        var showCities = function () {
          if (stage === 'tgi') {
            tgiPoints.forEach(function (d) {
              d.show();
            });
            popuPoints.forEach(function (d) {
              d.hide();
            });
          } else {
            tgiPoints.forEach(function (d) {
              d.hide();
            });
            popuPoints.forEach(function (d) {
              d.show();
            });
          }
        };
        var changeStage = function (newStage) {
          stage = newStage;
          fillTable();
          showCities();
        };

        $("#mapTableTgiTab").on("click", function () {
            changeStage("tgi");
        });
        $("#mapTablePopuTab").on("click", function () {
            changeStage("popu");
        });
        
        var highlightCity = function (cityName) {
            var cityData = data[stage].searchCityHash[cityName] || data[stage].tradeCityHash[cityName];
            //highlight searchIndex city
            if (cityData.search <=  10) {
              searchCityTd.find("span")
                .css({"color": "black"})
                .eq(cityData.search - 1)
                .css({"color": "blue"});
            }
            //highlight tradeIndex city
            if (cityData.trade <=  10) {
              tradeCityTd.find("span")
                .css({"color": "black"})
                .eq(cityData.trade - 1)
                .css({"color": "blue"});
            }

            /*
            lowlightCity(cityName);
            //highlight city point in map
            highlightCityPoint(cityName);
            */
        };

        var lowlightCity = function (cityName) {
            var cityData = data[stage].searchCityHash[cityName] || data[stage].tradeCityHash[cityName];
            //highlight searchIndex city
            if (cityData.search <=  10) {
              searchCityTd.find("span")
                .css({"color": "black"});
            } 
            //highlight tradeIndex city
            if (cityData.trade <=  10) {
              tradeCityTd.find("span")
                .css({"color": "black"});
            }
            //highlight city point in map
            //lowlightCityPoint();
        };


/*
        // hover searchindex city
        $("#mapTableCityRow").find("td:nth-child(2)").delegate("span", "mouseover", function () {
          var cityName = $(this).html().split(' ')[1];
          var cityData = data[stage].searchCityHash[cityName];
          $(this).css({"color": "blue"});
          if (cityData.trade <=  10) {
            $("#mapTableCityRow").find("td:nth-child(3)").find("span")
              .eq(cityData.trade - 1)
              .css({"color": "blue"});
          }
        });

        // hover tradeIndex city
        $("#mapTableCityRow").find("td:nth-child(3)").delegate("span", "mouseover", function () {
          var cityName = $(this).html().split(' ')[1];
          var cityData = data[stage].tradeCityHash[cityName];
          $(this).css({"color": "blue"});
          if (cityData.search <=  10) {
            $("#mapTableCityRow").find("td:nth-child(2)").find("span")
              .eq(cityData.search - 1)
              .css({"color": "blue"});
          }
        });
        */

        var w = 630;
        var h = 450;
        $("#chart").css({"width": w});

        var chinamap = new Chinamap("chart", {
            'width': w,
            'height': h,
            'geoDataPath': '../../lib/charts/data/chinaMap/'
        });
        chinamap.setOptions({'showWords': false});
        chinamap.setOptions({'levelChangeable': false});
        chinamap.setOptions({'mapId': 0});

        chinamap.setOptions({
            //"wordStyle": {'stroke': "black"},
            //"colorModel": "gradient",
            //"colors": ["#ddd", "#88f"]
        });
        //2010 人口统计
        chinamap.setSource();

        chinamap.on('areaHoverIn', function () {
            var map = this.data("map");
            var word = this.data("word");
            var info = this.data("info");
            map.floatTag.html("<p>" + info.properties.name + "</p>"
                            + "<p>" + data[stage]['areaInfo'][info.properties.name] + "</p>");
            map.floatTag.css({"visibility": "visible"});
            this.attr({"fill": "pink"});
        });
        chinamap.on('areaHoverOut', function () {
            var map = this.data("map");
            var word = this.data("word");
            var info = this.data("info");
            map.floatTag.css({"visibility": "hidden"});
            this.attr({"fill": info.fillColor});
        });

        var mouseoverCity = function () {
        };

        var mouseoutCity = function () {
        };

        chinamap.renderCallback = function () {
            var createPoints = function (cityArray, fillColor) {
              return chinamap.createCityPoints(cityArray, function (city) {
                        return this.paper.circle(city.coord[0], city.coord[1], 20)
                            .attr({
                                "stroke": "none",
                                "fill": fillColor,
                                "fill-opacity": 0.5
                                })
                            .data("map", this)
                            .data("cityInfo", city)
                            .mouseover(function () {
                              //highlightCity(city.name);
                              chinamap.fire("cityMouseover", city.name);
                            });
                    });

            }
            var tgiSearchP = createPoints(data.tgi.searchTopCities, searchIndexColor);
            var tgiTradeP = createPoints(data.tgi.tradeTopCities, tradeIndexColor);
            var popuSearchP = createPoints(data.popu.searchTopCities, searchIndexColor);
            var popuTradeP = createPoints(data.popu.tradeTopCities, tradeIndexColor);
            tgiPoints = tgiSearchP.concat(tgiTradeP);
            popuPoints = popuSearchP.concat(popuTradeP);
            popuPoints.forEach(function (el) {
                el.hide();
            });

            chinamap.on("cityMouseover", function (cityName) {
              //lowlightCity(cityName);
              chinamap.fire("cityMouseout", cityName);
              //highlight city point in map
              highlightCityPoint(cityName);
            });

            chinamap.on("cityMouseout", function (cityName) {
              lowlightCityPoint(cityName);
            });
            /*
            var tgiSearchP = chinamap.createCityPoints(data.tgi.searchTopCities, function (city) {
                        return this.paper.circle(city.coord[0], city.coord[1], 20)
                            .attr({
                                "stroke": "none",
                                "fill": searchIndexColor,
                                "fill-opacity": 0.5
                                })
                            .data("map", this)
                            .data("cityInfo", city)
                            .mouseover(function () {
                              //highlightCity(city.name);
                              chinamap.fire("cityMouseover", city.name);
                            });
                    });
            var tgiTradeP = chinamap.createCityPoints(data.tgi.tradeTopCities, function (city) {
                        return this.paper.circle(city.coord[0], city.coord[1], 20)
                            .attr({
                                "stroke": "none",
                                "fill": tradeIndexColor,
                                "fill-opacity": 0.5
                                })
                            .data("map", this)
                            .data("cityInfo", city)
                            .mouseover(function () {
                              //highlightCity(city.name);
                              chinamap.fire("cityMouseover", city.name);
                            });
                    });
                    */
            chinamap.floatTag.creator.mouseToFloatTag({x: 10, y: 10});
            /*
            //warning: html must be set before changeLoc, because dom node's height and width will affect floatTag's loc;
            chinamap.floatTag.html(tradeP[0].data("cityInfo").name)
                .css("visibility", "visible");
            chinamap.floatTag.creator.changeLoc(tradeP[0].data("cityInfo").pointLoc);

            */
            fillTable();

            chinamap.on("cityMouseover", function (cityName) {
                //console.log(cityName);
                highlightCity(cityName);
            });
            chinamap.on("cityMouseout", function (cityName) {
                //console.log(cityName);
                lowlightCity(cityName);
            });
            $("#mapTableCityRow").delegate("span", "mouseover", function () {
              var cityName = $(this).html().split(' ')[1];
              //highlightCity(cityName);
              chinamap.fire("cityMouseover", cityName);
            });
            $("#mapTableCityRow").delegate("span", "mouseout", function () {
              var cityName = $(this).html().split(' ')[1];
              //lowlightCity(cityName);
              chinamap.fire("cityMouseout", cityName);
            });

        };
        chinamap.render();





    </script>

    <script>
        //legend
        var legend = $("<div/>")
            .css({"position": "absolute",
                  "background-color": "gray",
                    "left": 0,
                    "top": 0})
            .appendTo($("#chart").css("position", "relative"));
        var legendPaper = new Raphael(legend[0], 130, 95);
        //legendPaper.rect(0, 0, 180, 100).attr({"fill": "gray"});
        legendPaper.text(20, 20, "热门城市分布")
            .attr({"text-anchor": "start",
                    "font-size": "16px",
                    "font-family": "微软雅黑"
                    });
        legendPaper.rect(20, 44 + (Raphael.vml ? 0 : 1), 12, 12)
            .attr({"fill": searchIndexColor,
                    "fill-opacity": 0.5,
                    "stroke": "none"});
        legendPaper.text(40, 50, "搜索指数")
            .attr({"text-anchor": "start",
                    "font-size": "14px",
                    "font-family": "微软雅黑"
                    });
        legendPaper.rect(20, 74 + (Raphael.vml ? 0 : 1), 12, 12)
            .attr({"fill": tradeIndexColor,
                    "fill-opacity": 0.5,
                    "stroke": "none"});
        legendPaper.text(40, 80, "成交指数")
            .attr({"text-anchor": "start",
                    "font-size": "14px",
                    "font-family": "微软雅黑"
                    });
    </script>

  </body>
</html>
